<!DOCTYPE html>
<html lang="en">
    <head>
        <title></title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script src="../js/vue.js"></script>
        <script src="../js/vue-router.js"></script>
    </head>
    <body>
        <!-- 1引入文件
        2创建路由对象 new VueRouter()
        3创建路由配置   routes
        4配置具体路由   name path component
        5创建路由映射的组件 component
        6注入路由 router
        7指定路由映射的组件所展示的区域 router-view
        8用router-link 组件来导航 -->
        <div id="app">
            <router-link to='/index'>首页</router-link>
            <router-link to='/login'>不是吧</router-link>
            <router-view></router-view>
        </div>
        <script>
            var Index = Vue.component('index',{
                template : '<h2>首页</h2>'
            })
            var Login = Vue.component('login',{
                template : '<h2>不是首页</h2>'
            })
            var router = new VueRouter({
                routes : [
                    {
                        name : 'Index',
                        path : '/index',
                        component : Index
                    },
                    {
                        name : 'Login',
                        path : '/login',
                        component : Login
                    },
                ]
            })
            var vm = new Vue({
                el: '#app',
                router,
                data: {

                }
            })
        </script>
    </body>
</html>